<template>
  <footer class="bg-dark text-white py-5">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 mb-4">
          <h5 class="mb-4">考研数据帝</h5>
          <p>致力于为考研学子提供最全面、最准确的院校数据和分析工具，助力考研成功。</p>
        </div>
        <div class="col-lg-2 col-md-4 mb-4">
          <h5 class="mb-4">快速链接</h5>
          <ul class="list-unstyled">
            <li class="mb-2" v-for="link in quickLinks" :key="link.text">
              <router-link :to="link.to" class="text-white-50">{{ link.text }}</router-link>
            </li>
          </ul>
        </div>
        <div class="col-lg-2 col-md-4 mb-4">
          <h5 class="mb-4">帮助中心</h5>
          <ul class="list-unstyled">
            <li class="mb-2" v-for="help in helpLinks" :key="help.text">
              <router-link :to="help.to" class="text-white-50">{{ help.text }}</router-link>
            </li>
          </ul>
        </div>
        <div class="col-lg-4 col-md-4 mb-4">
          <h5 class="mb-4">联系我们</h5>
          <p class="mb-2"><i class="bi bi-envelope me-2"></i> contact@kaoyandata.com</p>
          <p class="mb-2"><i class="bi bi-telephone me-2"></i> 400-123-4567</p>
          <div class="d-flex gap-3 mt-3">
            <a v-for="social in socialLinks" :key="social.icon" href="#" class="text-white">
              <i :class="social.icon" class="fs-5"></i>
            </a>
          </div>
        </div>
      </div>
      <hr class="my-4 bg-secondary">
      <div class="text-center text-white-50">
        <p class="m-0">© {{ currentYear }} 考研数据帝 版权所有 | 京ICP备12345678号</p>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'AppFooter',
  data() {
    return {
      quickLinks: [
        { text: '首页', to: '/' },
        { text: '院校库', to: '/schools' },
        { text: '专业库', to: '/majors' },
        { text: '备考工具', to: '/tools' }
      ],
      helpLinks: [
        { text: '使用教程', to: '/help/tutorial' },
        { text: '常见问题', to: '/help/faq' },
        { text: '数据说明', to: '/help/data' },
        { text: '联系我们', to: '/contact' }
      ],
      socialLinks: [
        { icon: 'bi bi-wechat', url: '#' },
        { icon: 'bi bi-weibo', url: '#' },
        { icon: 'bi bi-qq', url: '#' }
      ]
    }
  },
  computed: {
    currentYear() {
      return new Date().getFullYear()
    }
  }
}
</script>

<style>
footer a {
  text-decoration: none;
  transition: color 0.3s;
}

footer a:hover {
  color: var(--primary-color) !important;
}
</style>